#portfolio-banner
  background-image url(../img/banner-6.jpg)

#coop
  background-color white
  padding 1rem 0 2rem

  h2
    color #333
    font-size 1.875rem

  .lead
    font-size .875rem
    line-height 2
    margin-bottom 2em

    a
      color $active-color

      &:hover
        text-decoration underline

  @media (min-width $lg-min-width)
    & .container
      width 844px

  @media (max-width $md-max-width)
    & .container
      width 75%

  @media (max-width $xs-max-width)
    &
      padding 0 0 1.5rem

      .lead
        margin 0 auto 2em
        width 19rem

      .container
        width 90%

.features
  padding 0
  margin-bottom 0

  p
    color $active-color
    font-size .875rem
    position absolute
    top 0
    left 10%
    bottom 0
    width 80%
    height 100%
    text-align center
    transform translateX(-200%)
    transition .2s all
    display flex
    justify-content center
    align-items center

  span
    border 1px solid $active-color
    border-radius 50%
    background url(../img/icons.png) no-repeat center top
    display block
    margin 0 auto
    width 86px
    height 86px
    transition .2s all

  .col-sm-3
    list-style none
    overflow hidden

    &:hover
      p
        transform translateX(0)

      span
        opacity 0

    &:nth-child(n+5)
      margin-top 2rem

    for n in 2..8
      &:nth-child({n}) span
        background-position-y -84px * (n - 1)

  @media (max-width $xs-max-width)
    & .col-sm-3:nth-child(n+4)
      margin-top 1.5rem

#portfolio-slide
  background url(../img/portfolio-bg.jpg) no-repeat center/cover
  padding 2.5rem 0

  .container
    display flex

  .card
    background-color #222
    border none
    border-radius 0
    position relative
    transition all .4s

    &::after
      content ''
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      background-color rgba(0,0,0,.4)

    &:hover,
    &:active,
    &.active
      &::after
        display none

  img
    width 100%
    object-fit cover
    transition .4s all

  footer
    padding 1.5rem .5rem 1.5rem 1.5rem
    transition .4s all

  h3
    margin-bottom 1em

  h3,
  a
    color $active-color

  p
    color white
    font-size .875rem
    margin-bottom 0

  .indicators
    padding 0
    text-align center

    .indicator
      background-color white
      display inline-block
      list-style none
      transition .4s background-color

      + .indicator
        margin-left .25rem

      &.active,
      &:hover
        background-color $active-color

  @media (min-width $sm-min-width)
    &

      .card
        width 30%
        flex 1 1 30%
        max-height 572px

        + .card
          margin-left .5%

        &:hover,
        &:active,
        &.active
          min-width 39%

          img
            height 450px

          footer
            height 4.5rem + .75rem + .875rem * 1.5 * 2 // h3 + 上下边距 + 两行文字 + 空隙

          h3
            margin-bottom .5em

          p
            display block

      img
        height 500px

      footer
        overflow hidden
        height 4.5rem

      .indicators
        margin 2rem 0 0

        .indicator
          width 60px
          height 6px
          font 6px/6px

  @media (max-width $xs-max-width)
    &
      padding 1.5rem 0

      .scroll
        overflow scroll
        -webkit-overflow-scrolling touch
        width 100%

      .container
        padding 0 10px
        width 790px

      .card
        width 250px

        + .card
          margin-left 10px

      img
        width 100%
        height 20rem

      h3
        font-size 1.333333rem

      .indicators
        margin 1rem 0 0

        .indicator
          width 2.5rem
          height .25rem
          font-size .25rem
          line-height 1